<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org/thymeleaf/layout" layout:decorator="admin/layout">
	<style type="text/css" layout:fragment="head">
		.main.container { padding-top: 4em; }
		.ui.fixed.secondary.menu { background: #f5f5f5; border-bottom: 1px solid #e5e5e5; z-index: 1001; }
		.ui.fixed.secondary.menu img { width: 20px; height: 20px; }
		.fz-users .ui.horizontal.list>.item>.icon,.fz-users .ui.horizontal.list>.item>.icon+.content { display: table-cell; }
	</style>
	<th:block layout:fragment="content">
		<div class="ui fixed secondary menu">
			<div class="ui container">
				<a class="active item" href="#/dashboard"><i class="icon dashboard"></i>Dashboard</a>
				<div class="ui dropdown pointing item">
					<i class="database icon"></i>Content
					<i class="dropdown icon"></i>
					<div class="menu">
						<a class="item" href="#/content/pages"><i class="file text icon"></i>Posts &amp; Pages</a>
					</div>
				</div>
				<div class="ui dropdown pointing item">
					<i class="tasks icon"></i>Website Management
					<i class="dropdown icon"></i>
					<div class="menu">
						<a class="item" href="#/mng/settings"><i class="cogs icon"></i>Basic</a>
						<a class="item" href="#/mng/ip-settings"><i class="alt list icon"></i>IP Settings</a>
						<a class="item" href="#/mng/redirects"><i class="share square icon"></i>Redirects</a>
						<a class="item" href="#/mng/themes"><i class="desktop icon"></i>Themes</a>
					</div>
				</div>
				<div class="ui dropdown pointing item" sec:authorize="hasRole('ROLE_ADMIN')">
					<i class="settings icon"></i>Administration
					<i class="dropdown icon"></i>
					<div class="menu">
						<a class="item" href="#/admin"><i class="settings icon"></i>Administration</a>
						<a class="item" href="#/admin/plugins"><i class="puzzle piece icon"></i>Plugins</a>
						<a class="item" href="#/admin/themes"><i class="desktop icon"></i>Themes</a>
						<a class="item" href="#/admin/websites"><i class="globe icon"></i>Websites</a>
						<div class="divider"></div>
						<a class="item" href="#/admin/users"><i class="users icon"></i>Users</a>
						<a class="item" href="#/admin/users/new"><i class="users icon"></i>Add User</a>
					</div>
				</div>
				<div class="right menu">
					<div class="ui dropdown pointing item">
						<img th:if="${#authentication.principal.picture}" th:src="${#authentication.principal.picture}" class="ui image circular avatar"/>
						<span sec:authentication="principal.firstName" th:remove="tag" />
						<span sec:authentication="principal.lastName" th:remove="tag" />
						<i class="dropdown icon"></i>
						<div class="menu">
							<a class="item" href="#/user/profile"><i class="user icon"></i>User Profile</a>
							<a class="item" href="#/user/settings"><i class="options icon"></i>Settings</a>
							<div class="divider"></div>
							<a class="item logout"><i class="sign out icon"></i>Logout</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div ng-view="" class="ui container main"></div>
		<form id="logout" th:action="@{/admin/logout}" method="post">
			<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
		</form>
	</th:block>
	<th:block layout:fragment="body-bottom">
<!-- 		<script src="//cdn.bootcss.com/angular.js/1.4.2/angular.min.js"></script>
		<script src="//cdn.bootcss.com/angular-i18n/1.4.2/angular-locale_zh-cn.min.js"></script> 
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-messages.min.js"></script> -->
		<script th:src="@{/webjars/angularjs/1.4.2/angular.min.js}"/>
		<script th:src="@{/webjars/angularjs/1.4.2/i18n/angular-locale_zh-cn.js}"/>
		<script th:src="@{/webjars/angularjs/1.4.2/angular-route.min.js}"/>
		<script th:src="@{/webjars/angularjs/1.4.2/angular-resource.min.js}"/>
		<script th:src="@{/webjars/angularjs/1.4.2/angular-messages.min.js}"/>
		
		<script src="/admin/js/application.js"></script>
		<script type="text/javascript" th:inline="javascript">
			angular.element(document).ready(function(){
				$('.logout.item').click(function(){ $('#logout').submit(); })
				$('.ui.dropdown').dropdown({ action: 'hide'})
				angular.module('tbs').constant('CsrfToken', [[${_csrf.token}]])
				angular.bootstrap(document, ['tbs']);
			})
		</script>
	</th:block>

</html>